import { useEffect, useState } from 'react'

import eventBus from '@/utils/EventBus'
export const Log = () => {
  const [text, setText] = useState([
    `【环境】内网：${import.meta.env.VITE_BASE_API} `,
    `【环境】内网：${import.meta.env.VITE_BASE_PING} `,
    `【环境】OCR：${import.meta.env.VITE_BASE_PULICAPI} `,
  ])
  const onLog = (val: any) => {
    console.log(val)
    setText((a) => [...a, val.toString()])
    setTimeout(() => {
      const element = document.getElementById('line')
      element.scrollIntoView({ behavior: 'smooth' })
    }, 100)
  }
  useEffect(() => {
    eventBus.on('APPLOG', onLog)
    return () => {
      eventBus.off('APPLOG', onLog)
    }
  }, [])

  const [pingText, setPingText] = useState([])
  const onPingLog = (val: any) => {
    console.log(val)
    setPingText((a) => [...a, val.toString()])
    setTimeout(() => {
      const element = document.getElementById('ping-line')
      element.scrollIntoView({ behavior: 'smooth' })
    }, 100)
  }
  useEffect(() => {
    eventBus.on('APPPING', onPingLog)
    return () => {
      eventBus.off('APPPING', onPingLog)
    }
  }, [])
  return (
    <>
      <div
        className=" fixed right-2 top-[46vh] w-1/3 max-h-[200px] h-96 overflow-auto bg-black bg-opacity-60 z-[9999] p-2"
        id="scroll"
      >
        {pingText.map((a, k) => (
          <div key={k} className=" text-lime-500 break-all pb-1">
            {a}
          </div>
        ))}
        <div id="ping-line" className="h-1 w-full"></div>
      </div>
      <div
        className=" fixed top-2 right-2 w-1/3 h-[45vh]  overflow-auto bg-black bg-opacity-60 z-[9999] p-2"
        id="scroll"
      >
        {text.map((a, k) => (
          <div key={k} className=" text-lime-500 break-all pb-1">
            {a}
          </div>
        ))}
        <div id="line" className="h-1 w-full"></div>
      </div>
    </>
  )
}
